<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-20 11:53:31
 * @LastEditTime: 2019-08-30 14:30:10
 * @LastEditors: Please set LastEditors
 -->
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
	<div class="row">
		<div class="col-md-4">
			<div class="form-group">
				<label for="echart" class="control-label">图表类型</label>
				<f:if condition="{echarts.echart}">
					<f:then>
						<f:switch expression="{echarts.echart}">
							<f:case value="bar">
								<input type="text" readonly class="form-control" value="柱状图" />
							</f:case>
							<f:case value="line">
								<input type="text" readonly class="form-control" value="折线图" />
							</f:case>
							<f:case value="pie">
								<input type="text" readonly class="form-control" value="饼状图" />
							</f:case>
							<f:case value="funnel">
								<input type="text" readonly class="form-control" value="漏斗图" />
							</f:case>
						</f:switch>
					</f:then>
					<f:else>
						<select id="choiceChart" class="form-control" onchange='btnChange(this[selectedIndex]);'>
							<f:for each="{charts}" as="ch">
								<option value="{ch.key}" link="{f:uri.action(action:'new',arguments:'{chart:ch.key}')}" {f:if(condition:'{ch.key}=={chart}', then:'selected="selected"')} >{ch.value}
								</option>
							</f:for>
						</select>
						<f:form.hidden property="echart" value="{chart}" />
					</f:else>
				</f:if>
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<label for="theme" class="control-label">主题<small> <a href="#myModal" data-toggle="modal" data-target="#myModal"> 【<i class="fa fa-adjust"></i>预览主题】</a></small></label>
				<f:form.select property="theme" options="{themes}" optionValueField="file" optionLabelField="title" style="width:100%" class="form-control" />
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<label for="title" class="control-label">标题 <font class="error">*</font></label>
				<f:form.textfield property="title" class="form-control" placeholder="请填写图表标题"  />
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<label for="titlepos" class="control-label">标题对齐方式</label>
				<f:form.select property="titlepos" options="{position}" optionValueField="key" optionLabelField="value"
					style="width:100%" class="form-control" />
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<label for="subtitle" class="control-label">副标题</label>
				<f:form.textfield property="subtitle" class="form-control" placeholder="请填写副标题" />
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<label for="sublink" class="control-label">副标题超链接</label>
				<f:form.textfield property="sublink" class="form-control" placeholder="请填写副标题超链接" />
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<label for="width" class="control-label">图表容器宽度 <small>【<i class="fa fa-exclamation-circle" style="color:red"></i> 填写像素(500px)或百分比(100%)】</small></label>
				<f:form.textfield property="width" class="form-control" placeholder="请填写容器宽度" />
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<label for="height" class="control-label">图表容器高度 <small>【<i class="fa fa-exclamation-circle" style="color:red"></i> 填写像素(400px)或百分比(100%)】</small></label>
				<f:form.textfield property="height" class="form-control" placeholder="请填写容器高度" />
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<label for="alignment" class="control-label">图表显示位置</label>
				<f:form.select property="alignment" options="{align}" optionValueField="key" optionLabelField="value"
					style="width:100%" class="form-control" />
			</div>
		</div>
		<!-- <div class="col-md-4">
			<div class="form-group">
				<label for="toolbox" class="control-label">工具栏</label>
			</div>
			<div class="form-group">
				<label class="mt-checkbox mt-checkbox-outline">
					<f:form.checkbox property="toolbox" value="1" /> 显示
					<span></span>
				</label>
			</div>
		</div> -->
		<f:form.hidden property="tooltip" value="1" />
		<!-- <div class="col-md-4">
			<div class="form-group">
				<label for="tooltip" class="control-label">提示框</label>
			</div>
			<div class="form-group">
				<label class="mt-checkbox mt-checkbox-outline">
					<f:form.checkbox property="tooltip" value="1" /> 显示
					<span></span>
				</label>
			</div>
		</div> -->
	</div>
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">主题预览</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-4 theme" style="border: #eee solid 1px;"><a href="javascript:void(0);ownload=" dark.js" target="_blank" class="download-theme">
							<f:image src="typo3conf/ext/echarts/Resources/Public/Echarts/Picture/dark.png" width="170" height="160" style="margin-top: 10px;cursor: pointer;" alt="dark" /></a>
							<p style="text-align: center;"><b>dark</b></p>
						</div>
						<div class="col-sm-4 theme" style="border: #eee solid 1px;"><a href="javascript:void(0);c.js" download="infographic.js" target="_blank" class="download-theme">
							<f:image src="typo3conf/ext/echarts/Resources/Public/Echarts/Picture/infographic.png" width="170" height="160" style="margin-top: 10px;cursor: pointer;" alt="infographic" /></a>
							<p style="text-align: center;"><b>infographic</b></p>
						</div>
						<div class="col-sm-4 theme" style="border: #eee solid 1px;"><a href="javascript:void(0);s" download="macarons.js" target="_blank"
								class="download-theme"><f:image src="typo3conf/ext/echarts/Resources/Public/Echarts/Picture/macarons.png" width="170" height="160" style="margin-top: 10px;cursor: pointer;" alt="macarons" /></a>
							<p style="text-align: center;"><b>macarons</b></p>
						</div>
						<div class="col-sm-4 theme" style="border: #eee solid 1px;"><a href="javascript:void(0);ownload=" roma.js" target="_blank"
								class="download-theme"><f:image src="typo3conf/ext/echarts/Resources/Public/Echarts/Picture/roma.png" width="170" height="160" style="margin-top: 10px;cursor: pointer;" alt="roma" /></a>
							<p style="text-align: center;"><b>roma</b></p>
						</div>
						<div class="col-sm-4 theme" style="border: #eee solid 1px;"><a href="javascript:void(0);download=" shine.js" target="_blank"
								class="download-theme"><f:image src="typo3conf/ext/echarts/Resources/Public/Echarts/Picture/shine.png" width="170" height="160" style="margin-top: 10px;cursor: pointer;" alt="shine" /></a>
							<p style="text-align: center;"><b>shine</b></p>
						</div>
						<div class="col-sm-4 theme" style="border: #eee solid 1px;"><a href="javascript:void(0);" download="vintage.js" target="_blank"
								class="download-theme"><f:image src="typo3conf/ext/echarts/Resources/Public/Echarts/Picture/vintage.png" width="170" height="160" style="margin-top: 10px;cursor: pointer;" alt="vintage" /></a>
							<p style="text-align: center;"><b>vintage</b></p>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

</html>